<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>

    <link href="/css/cropper.min.css" rel="stylesheet" type="text/css">
    <link href="/css/vendor/common.css" rel="stylesheet" type="text/css">
    <link href="/css/vendor/cmp-controls.css" rel="stylesheet" type="text/css">
    <link href="/css/vendor/user-info-modify.less" rel="stylesheet/less" type="text/css">
    <script src="/js/less.min.js"></script>
</head>

<body>

<div class="page-mask-container">
    <div class="user-info-wrap">
        <h1>个人信息</h1>

        <div class="row-0">
            <table class="icon-info" cellpadding="0" cellspacing="0">
                <tr>
                    <th>更换头像:</th>
                </tr>
                <tr>
                    <td>请上传头像 要求: 90X90以上 PNG/JPEG</td>
                </tr>
                <tr>
                    <td>
                        <table class="icon-table" cellpadding="0" cellspacing="0">
                            <tr>
                                <td>
                                    <img id="user-icon-0" class="icon-0" src="/images/user-info-modify/user-info-icon.png" alt="用户头像">
                                    <img id="user-icon-upload" class="upload-icon" src="/images/user-info-modify/user-info-icon-upload.png">
                                    <input id="user-icon-upload-input" type="file">
                                </td>
                                <td>
                                    <img id="user-icon-1" class="icon-1" src="/images/user-info-modify/user-info-icon.png">
                                </td>
                            </tr>
                            <tr>
                                <td>90x90</td>
                                <td>27x27</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

            <table class="user-info" cellpadding="0" cellspacing="0">
                <tr>
                    <th>用户ID:</th>
                    <td id="user-id"></td>
                </tr>
                <tr>
                    <th>登录手机号:</th>
                    <td id="user-phone"></td>
                </tr>
                <tr>
                    <th>昵称:</th>
                    <td><input disabled class="common-edit" type="text" id="user-nickname" value=""></td>
                </tr>
                <tr>
                    <th>性别:</th>
                    <td><select id="user-sex" class="sex" disabled>
                            <option value="-1">请选择</option>
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select></td>
                </tr>
                <tr>
                    <th>绑定邮箱:</th>
                    <td><input disabled class="common-edit" type="text" value="" id="user-email"></td>
                </tr>
            </table>
        </div>

        <div class="row-1">
            <table class="table-0">
                <tr>
                    <th>本地GPS权限:</th>
                    <td><select id="user-permission_local_gps" disabled>
                            <option value="-1">未知</option>
                            <option value="1">可用</option>
                            <option selected value="0">不可用</option>
                        </select></td>
                </tr>
                <tr>
                    <th>状态:</th>
                    <td><select disabled id="user-status">
                            <option value="-1">未知</option>
                            <option value="1">可用</option>
                            <option selected value="0">不可用</option>
                        </select></td>
                </tr>
            </table>
            <table class="table-1">
                <tr>
                    <th>P40相机权限:</th>
                    <td><select disabled>
                            <option value="-1">未知</option>
                            <option value="1">可用</option>
                            <option selected value="0">不可用</option>
                        </select></td>
                </tr>
                <tr>
                    <th>城市:</th>
                    <td><input disabled class="common-edit" type="text" value="" id="user-city"></td>
                </tr>
                <tr>
                    <th>公司:</th>
                    <td><input disabled class="common-edit" type="text" value="" id="user-company"></td>
                </tr>
            </table>
        </div>

        <p class="created-time">创建时间: <span id="user-createtime"></span></p>

        <table class="bottom-bar">
            <tr class="editing-btn remove">
                <td class="button" onClick="userInfoM.clickCancel()"><img class="cancel"
                                                                          src="/images/user-info-modify/user-info-cancel.png"><span>取消</span>
                </td>
                <td class="button" onClick="userInfoM.clickSave()"><img
                            src="/images/user-info-modify/user-info-save.png"><span>保存</span></td>
            </tr>
            <tr class="normal-btn">
                <td class="button" onClick="userInfoM.updateEditState(true)"><img class="edit"
                                                                                  src="/images/user-info-modify/user-info-edit.png"><span>编辑</span>
                </td>
            </tr>
        </table>
    </div>
</div>

</body>

{% include 'template/baseJs.volt' %}
<script src="/js/cropper.min.js"></script>
<script src="/js/vendor/user-info-modify.js"></script>

<script>
    userInfoM.clickCancelCallback = function () {
        console.log("取消编辑");
        getUserInfo();
    };

    userInfoM.clickSaveCallback = function () {
        loadingView.show();
        console.log("点击了 保存个人信息");
        feimaPost("/user/editProfile", {
            "nickname": $("#user-nickname").val(),
            "sex": $("#user-sex").val(),
            "email": $("#user-email").val(),
            "city": $("#user-city").val(),
            "company": $("#user-company").val(),
            "image_data": userInfoM.userIconSrc
        }, function (result) {
            loadingView.remove();
            FAlert(result.message,function(){
                userInfoM.sendMsgUpdateInfo();
            });
        });
        // 发消息给父页面刷新用户信息
    };

    function getSelectValue(value) {
        if (value) {
            return value;
        } else {
            return -1;
        }
    }

    function getUserInfo() {
        feimaPost("/user/myProfile", {}, function (resultObj) {
            var result=resultObj.data;
            $("#user-id").text(result["id"]);
            $("#user-phone").text(result["phone"]);
            $("#user-nickname").val(result["nickname"]);
            //$("#user-sex").select()
            $("#user-city").val(result["city"]);
            $("#user-company").val(result["company"]);
            $("#user-email").val(result["email"]);
            $("#user-sex").val(getSelectValue(result["sex"]));
            $("#user-createtime").text(result["created_at"]);
            $("#user-permission_local_gps").val(getSelectValue(result["permission_local_gps"]));
            $("#user-permission_p40").val(getSelectValue(result["permission_p40"]));
            $("#user-status").val(getSelectValue(result["online"]));
            if (result["icon_url"]){
                $("#user-icon-0").attr("src", result["icon_url"]+"?"+Math.random());
                $("#user-icon-1").attr("src", result["icon_url"]+"?"+Math.random());
            }

        });
    }

    $(function () {
        getUserInfo();
    });

</script>

</html>






